<template>
	
	<myHeadTab>添加视频</myHeadTab>
	
	<view style="background: #F1F5FF;height: 100vh;padding-left: 32rpx;padding-top: 32rpx;">
		
		
		<uni-file-picker  :del-icon="false" v-model="fileList"  file-mediatype="video" @select="select" 	@progress="progress" @success="success" @fail="fail"  ref="files" :auto-upload="false"  style="position: absolute;"><view></view></uni-file-picker>
		<view class="upload-card" @click="handleChoose">
			<image style="height: 88rpx;width: 88rpx;" src="../../../../static/upload.png"></image>
			<view style="width: 100%;height: 24rpx;"></view>
			<view class="upload-font">上传文件</view>
		</view>
		
		<view style="width: 100%;height: 24rpx;"></view>
		
		<view class="f1">仅支持一般视频格式。如MP4、AVI、WMV文件大小100M以下。仅一个。</view>
		
		<template v-for="(item,index) in fileList" :key="index">
			<view style="width: 100%;height: 24rpx;"></view>
		
			<view class="file-card">
			
				<view style="height: 34rpx;width: 100%;display: flex;">
					<view style="height: 100%;width: 28rpx;display: flex;justify-content: center;align-items: center;">
						<image style="height: 28rpx;width: 28rpx;" src="../../../../static/附件.png"></image>
					</view>
					
					<view style="height: 100%;width: 12rpx;"></view>
					<view class="f3">{{item.name}}</view>
				</view>
			
				<view style="width: 100%;height: 6rpx;"></view>
			
				<view style="display: flex;">
					<progress active-color="#276EFF"  background-color="#DBE1ED" :stroke-width="6" border-radius="6" :percent='item.process'  class="pg"></progress>
					<view style="width: 20.5rpx;height: 100%;"></view>
					<image @click="handleDelete(item)" style="width: 24rpx;height: 24rpx;position: relative;top: -7rpx;" src="../../../../static/关闭.png"></image>
				</view>
				
				
			
			</view>
		</template>
		
		
		<view style="width: 100%;height: 64rpx;"></view>
		
		<button @click="handleChoose" class="btn" style="position: relative;left: -14rpx;"><view class="f2">添加</view></button>
		
	</view>
</template>

<script setup>
import myHeadTab from '../../../../component/myHeadTab/index.vue'
import {ref} from 'vue'
const fileList = ref([]);
const files = ref(null)

		function handleDelete(item){
			fileList.value = fileList.value.filter((item)=>{if(item.uuid != item.uuid){return item}})
		}

			// 获取上传状态
		function select(e){
				console.log('选择文件：',e)
				e.tempFiles.forEach((item)=>{
					fileList.value.push(item)
				})
				
			}
			// 获取上传进度
		function progress(e){
				console.log('上传进度：',e)
			}
			
			// 上传成功
		function success(e){
				console.log('上传成功')
			}
		
			// 上传失败
		function fail(e){
				console.log('上传失败：',e)
			}

		function handleChoose(){
			console.log(files.value)
			files.value.chooseFiles()
		}

</script>

<style >

	
/deep/ .uni-file-picker__item{
	z-index: -1 !important;
	position: absolute !important;
}

/deep/ .uni-file-picker__files{
	z-index: -1 !important;
	position: absolute !important;
}

/deep/ .file-picker__box{
	width: 700rpx !important;
	height: 305rpx !important;
	border: none !important;
	position: absolute !important;
}

/deep/ .file-picker__box-content{
	border: none !important;
	position: absolute !important;
	
}

/deep/ .is-add{
	z-index: 10 !important;
}
	
/deep/ .uni-progress-bar{
		border-radius: 12rpx !important;
	}
	
/deep/ .uni-progress-inner-bar {  
		   
		    border-radius: 12rpx !important;
		}

.upload-card{
	width: 686rpx;
	height: 216rpx;
	padding-top: 64rpx;
	background: #FFFFFF;
	border: 2rpx dotted #B2B7C3;
	border-radius: 16rpx;
	text-align: center;

}
.upload-font{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 28rpx;
	color: #000000;
	letter-spacing: 0;
	line-height: 40rpx;
}
.f1{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 24rpx;
	color: #939393;
	letter-spacing: 0;
}
.file-card{
	width: 654rpx;
	height: 86rpx;
	background: #FFFFFF;
	border-radius: 16rpx;
	padding-left: 32rpx;
	padding-top: 34rpx;
}
.btn{
	width: 686rpx;
	height: 80rpx;
	background: #276EFF;
	border-radius: 16rpx;
}
.f2{
	font-family: PingFangSC-Medium;
	font-weight: 500;
	font-size: 30rpx;
	color: #FFFFFF;
	letter-spacing: 0;
	line-height: 80rpx;
}
.f3{
	font-family: PingFangSC-Regular;
	font-weight: 400;
	font-size: 24rpx;
	color: #000000;
	letter-spacing: 0;
}
.pg{
width: 576.82rpx;
height: 12rpx;
background: #DBE1ED;
border-radius: 6rpx !important;
}
</style>
